<template>
  <view
    v-if="swiperImg.length"
    :style="{'height': swiperHeight,'z-index': isZindex ? 2999 : 99}"
    :class="classNameList"
  >
    <swiper
      :style="{'height': swiperHeight,'z-index': isZindex ? 2999 : 99}"
      :circular="swiperImg.length > 1"
      :autoplay="swiperAutoPlay"
      :indicator-dots="false"
      class="swiper"
      @change="swiperChange"
    >
      <swiper-item v-for="(item,index) in swiperImg" :key="index">
        <view v-if="item.type === 'video'" style="width: 100%;height: 100%;">
          <video
            id="myVideo"
            :src="item.url"
            :autoplay="videoPlay"
            :muted="muted"
            :enable-progress-gesture="false"
            play-btn-position="center"
            style="width: 100%;height: 100%;"
            @play="play"
            @pause="pause"
            @ended="ended"
            @fullscreenchange="fullscreenchange"
          />
        </view>
        <view class="swiper-item" v-if="item.type==='image'" :style="{'height': swiperHeight,'z-index': isZindex ? 2999 : 99}">
          <x-image :src="formatOss(item.url)" :mode="picMode"/>
        </view>
      </swiper-item>
    </swiper>
    <view class="indicatorDots">
      {{ swiperImg.length > 0 ? swiperCurrent + 1 : swiperCurrent }}/{{ swiperImg.length }}
    </view>

    <!--扩展内容-->
    <slot />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import XImage from '@/components/x-image';

export default {
  name: 'PSwiper',
  components: {
    XImage
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    indexPic: {
      type: Object,
      default: () => {}
    },
    indexVideo: {
      type: Object,
      default: () => {}
    },
    isVideo: {
      type: Boolean,
      default: false
    },
    isRadius: {
      type: Boolean,
      default: false
    },
    muted: {
      type: Boolean,
      default: false
    },
    dotPlacement: {
      type: String,
      default: 'bottom'
    },
    mode: {
      type: String,
      default: ''
    },
    height: {
      type: [Number, String],
      default: 0
    },
    isZindex: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      swiperCurrent: 0,
      // 视频播放
      videoPlay: true,
      // 是否进入全屏
      inFullScreen: true
    };
  },
  computed: {
    ...mapState({
      // 返回出优惠金额弹框
      payCancelTwoVisible: state => state['pages'].payCancelTwoVisible
    }),
    classNameList() {
      const arr = ['p-swiper'];
      if (this.isRadius) {
        arr.push('is-radius');
      }
      arr.push(`is-dot-${this.dotPlacement}`);
      return arr.join(' ');
    },
    swiperHeight() {
      return this.height ? this.height : (this.swiperRatio === 1 ? '750rpx' : '1000rpx');
    },
    swiperRatio() {
      return this.indexPic ? this.indexPic.ratio : 1;
    },
    swiperClip() {
      return this.indexPic ? this.indexPic.clip : 1;
    },
    picMode() {
      return this.mode ? this.mode : this.swiperClip === 1 ? 'aspectFill' : 'aspectFit';
    },
    swiperImg() {
      const list = [];
      //  视频
      if (this.indexVideo && this.indexVideo.videoUrl && this.isVideo) {
        list.push({ type: 'video', url: this.indexVideo.videoUrl });
      }

      // 主图
      if (this.list || this.indexPic) {
        // 优先使用 list
        if (this.list.length) {
          this.list.forEach(url => {
            list.push({ type: 'image', url });
          });
        } else {
          const { picList } = this.indexPic || {};
          if (picList) {
            picList.forEach((url) => {
              list.push({ type: 'image', url });
            });
          }
        }
      }

      return list;
    },
    swiperAutoPlay() {
      return this.swiperImg.length > 1 && !this.videoPlay;
    }
  },
  watch: {
    payCancelTwoVisible(value) {
      if (value) {
        this.$nextTick(() => {
          this.setPause();
        });
      }
    }
  },
  created() {},
  destroyed() {
    this.setStop();
  },
  methods: {
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url);
    },
    // 轮播图切换
    swiperChange(e) {
      this.swiperCurrent = e.detail.current;
      this.setPause();
    },
    // 视频播放
    play() {
      this.videoPlay = true;
      this.$emit('play');
    },
    // 视频暂停
    pause() {
      this.videoPlay = false;
      this.$emit('pause');
    },
    // 视频播放结束
    ended() {
      this.videoPlay = false;
      this.$emit('ended');
    },
    // 进入全屏
    fullscreenchange(e) {
      // 值true为进入全屏，false为退出全屏
      this.$emit('fullscreenchange', e.detail.fullScreen);
    },
    // 设置视频暂停
    setPause() {
      try {
        const video = uni.createVideoContext('myVideo', this);
        if (video && this.videoPlay) {
          video.pause(); // 暂停视频播放
        }
      } catch (e) {
        console.warn('video->', e);
      }
    },
    // 设置视频播放
    setPlay() {
      try {
        const video = uni.createVideoContext('myVideo', this);
        if (video && !this.videoPlay) {
          video.play();
        }
      } catch (e) {
        console.warn('video->', e);
      }
    },
    // 设置视频停止
    setStop() {
      try {
        const video = uni.createVideoContext('myVideo', this);
        if (video) {
          video.stop();
        }
      } catch (e) {
        console.warn('video->', e);
      }
    }
  }
};
</script>

<style lang="scss">
  .p-swiper{
    overflow: hidden; position: relative;
    .swiper-item { overflow: hidden; display: block; height: 750px; line-height: 750px; text-align: center; }
    .indicatorDots{ position: absolute; padding: 0 20px; height: 40px; line-height: 40px; text-align: right; color: #fff; background: rgba(0, 0, 0, 0.4); border-radius: 25px; font-size: 28px; }

    &.is-radius {
      border-radius: 50px 50px 0 0;
      .swiper-item{ border-radius: 50px 50px 0 0;}
    }
    &.is-dot-bottom .indicatorDots{ bottom: 30px; right: 30px;}
    &.is-dot-top-right .indicatorDots{ right: 30px; top: 30px;}
  }
</style>
